import React from "react";

import styles from './page.module.css'
import MyButton from "@/components/button/MyButton";
import Image from "next/image";
import { items } from './fixedData'
import { notFound } from "next/navigation";

const getFixedData = (category) => {
    const data = items[category]

    if (data) {
        return data
    }

    return notFound()
}

const PortfolioCategory = async ({ params }) => {
    // 等待 params 解析（关键步骤）
    const { category } = await params;
    const data = getFixedData(category)
    // todo: 对data的image做中文解码
    data.forEach(item => {
        item.image = decodeURIComponent(item.image)
    })

    return (
        <div className={styles.container}>
            <h1 className={styles.categoryTitle}>{category}</h1>

            {data.map((item) => (

                <div className={styles.item} key={item.id}>
                    <div className={styles.content}>
                        <h1 className={styles.title}>{item.title}</h1>
                        <p className={styles.desc}>{item.desc}</p>
                        {/* todo: moreurl 自己定义 */}
                        <MyButton text="更多" url={item.moreurl} />
                    </div>
                    <div className={styles.imgContainer}>
                        <Image
                            src={decodeURIComponent(item.image)} // 修正：之前的错误是用了 item.img，这里改为 item.image（与 fixedData 一致）
                            alt=""
                            fill={true}
                            className={styles.img}
                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

                        />
                    </div>
                </div>
            ))}
        </div>
    )
}

export default PortfolioCategory;